<!doctype html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Captain Chen">
    <meta name="Keywords" content="web chat">
    <title>Web Chat</title>

    <style type="text/css">
        @import url("./chat_style.css");
        @import url("./static/chat_style.css");
    </style>
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./static/jquery-3.6.0.min.js"></script>
    <script src="./chat_javascript.js"></script>
    <script src="./static/chat_javascript.js"></script>
</head>

<body id="parent" class="row_container" style="background-color:rgb(192, 192, 192)">
    <div id="create_group_popup" class="mask" style="display:none">
        <div class="popup center col_container" style="width:500px;height:300px;">
            <header class="top" style="height:40px;background-color: #78cbff;">
                <span
                    style="position:absolute;color:#fff;margin:10px;height:20px;font-weight: bold;text-shadow: 1px 1px 1px #333;">选择群组好友</span>
                <div class="close_button" onclick="OnCloseCreateGourpPopup()"
                    style="position: absolute;right: 5px;top: 5px;">
                    x</div>
            </header>
            <div class="middle checkboxs" style="padding:5px;margin:10px 20px 10px 20px;border:1px solid #333;">
            </div>
            <footer class="bottom" style="height:60px;">
                <button onclick="OnConfirmCreateGroup()" class="button blue"
                    style="position:absolute;right:5px;width:100px;height:30px;">
                    确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认
                </button>
            </footer>
        </div>

    </div>

    <aside id="left_aside" class="left col_container" style="background-color: rgb(227, 248, 255);">
        <header class="top" style="background-color:#2cabfa;border-bottom:1px rgb(192, 192, 192) solid">
            <p id="self"
                style="line-height:60px;text-shadow: 1px 1px 1px #333;font-size:20px;font-weight: bold;text-align: center;color:#fff;margin:0;">
            </p>
        </header>
        <div id="friends" class="middle col_container" style="background-color:#6cc7ff">
        </div>
        <footer id="functions" class="bottom col_container"
            style="height:100px;border-top: 1px rgb(192, 192, 192) solid;">
            <div class="row_container" style="height:50px">
                <button id="add_friend" class="button blue" style="width:200px;height:30px;margin:10px">
                    添加好友
                </button>
                <button id="create_group" class="button blue" style="width:200px;height:30px;margin:10px">
                    创建群组
                </button>
            </div>
            <div class="row_container" style="height:50px">
                <button id="logout_button" class="button blue" style="width:100%;height:30px;margin:10px">
                    退出登录
                </button>
            </div>
        </footer>
    </aside>
    <div id="chat" class="right col_container">
        <div id="chat_hearder" class="top"
            style="background-color: rgb(227, 248, 255);color:rgb(110, 146, 255);text-shadow: 1px 1px 1px rgb(94, 94, 94);font-size:30px;">
            <p id="friend_name" style="margin:10px;"></p>
        </div>
        <div id="div_msg_log" class="middle" style="background-color: rgb(227, 248, 255); padding-bottom: 5px;">
            <div id="msg_log">
            </div>
        </div>
        <div id="chat_input" class="bottom"
            style="display: flex; flex-direction: row; position: relative; background-color: rgb(255, 255, 255);">
            <div class="mask" style="position:absolute;background-color: rgba(0, 0, 0, 0.264);display:block;"></div>
            <textarea id="input_box" class="input_box" placeholder="请输入消息"></textarea>
            <div style="flex-shrink: 0; width: 100px;">
                <button id="send_button" class="button blue">发送消息</button>
            </div>
        </div>
    </div>
</body>

</html>